<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Make It Quantum!</title>

<!-- styles -->
<link href='assets/css/bootstrap.css' rel="stylesheet" />
<link href='assets/css/style.css' rel="stylesheet" />

</head>
<body>
    <div class="picture-side left" >
        <div class='elements left' >
            <ul id='left-panel'>
                <li><img src='assets/img/source.png' id='source1' class='source' title="Photon Source" draggable="true" /></li>
                <li><img src='assets/img/source.png' id='source2' class='source' title="Photon Source" draggable="true" /></li>
                <li><img src='assets/img/source.png' id='source3' class='source' title="Photon Source" draggable="true" /></li>
                <li><img src='assets/img/eprSource.png' id='doubleSource' class='doubleSource' title="Entangled Photon Source" draggable="true" /></li>
                <li><img src='assets/img/coupler.png' id='coupler1' class='coupler' title="Optical Coupler" draggable="true" /></li>
            </ul>
        </div>
        
    </div>
    <div class="container-narrow">
        <div class="header centered">
            <h2>Cryptography: Make It Quantum!</h2>
        </div>
        <div class='row'>
            <div class='col-lg-12'>
                <ul id='top-panel'>
                   <li><img src="assets/img/classicChannel.png" class='channel' id='classicChannel1' title="Classic Channel" draggable="true" /></li>
                   <li><img src="assets/img/classicChannel.png" class='channel' id='classicChannel2' title="Classic Channel" draggable="true" /></li>
                   <li><img src="assets/img/classicChannelLong.png" class='channel' id='longClassicChannel1' title="Classic Channel" draggable="true" /></li>
                   <li><img src="assets/img/classicChannelLong.png" class='channel' id='longClassicChannel2' title="Classic Channel" draggable="true" /></li>
                </ul>
            </div> 
        </div>
        <div class='row'>
            <div class='col-lg-12'>
                <div id='canvas'>
		    <canvas id='true_canvas' width="100%" height="100%"></canvas>
		</div>
            </div>   
        </div>
        <div class='row'>
            <div class='col-lg-12'>
                <ul id='bottom-panel'>
                   <li><img src="assets/img/line.png" id='line1' class='line' title="Quantum Channel" draggable="true" /></li>
                   <li><img src="assets/img/line.png" id='line2' class='line' title="Quantum Channel" draggable="true" /></li>
                   <li><img src="assets/img/line.png" id='line3' class='line' title="Quantum Channel" draggable="true" /></li>
                </ul>
            </div> 
            <div class='col-lg-12 centered'>
                <input type='button' class='btn btn-primary ' value="Check Layout" onclick="check_scheme()"></button>
            </div>
        </div>
        
        <div class='row'>
            <div class='col-lg-12'>
                <hr />
                <h3 class='centered'>OR</h3>
                <h3 class='centered'>...you can construct your own variation of QKD protocol</h3>
                        <br />
                        How many qubits do you want to send? <input id="qub_num" name="qub_num" type="text" class='form-control' />                 
                    
                        Someone's eavesdropping? <input id=".isEugene" type="checkbox" />
                        <br />
                        
                         <!-- <input id=".send" name=".send" type="button" value="Send" class='btn' onclick=send() />
                       
                            TODO Реализовать пошаговое отображение действий алгоритма, чтобы можно было поочередно выводить каждый генерируемый бит базиса
                        -->
                        <input name="display_protocol_con" type="button" value="Construct Protocol" class='btn' onclick=display_protocol_constr() />
            <hr />
            </div>
        </div>
        
        <div class='row protocol_construction'>
            <div class='col-lg-12'>
                <h3>Construct your protocol!</h3>
            </div>
            <div class='col-lg-6'>
                <h4>Number of Alice's basis vectors</h4>
                <input id="alice_basis_num" name="alice_basis_num" type="text" class='form-control' required="required" />
                <h4>And their rotation angle</h4>
                <input id="alice_basis_angle" name="alice_basis_angle" type="text" class="form-control" required="required" />
            </div>
            <div class='col-lg-6'>
                <h4>Number of Bob's basis vectors</h4>
                <input id="bob_basis_num" name="bob_basis_num" type="text" class='form-control' required="required" />
                <h4>And their rotation angle</h4>
                <input id="bob_basis_angle" name="bob_basis_angle" type="text" class="form-control" required="required" />
                <br />
                <input id="new_protocol" name="new_protocol" type="button" value="Construct&Launch" class='btn' onclick=new_protocol() />    
            </div>
        </div>
            
        <div class='row result1'>
            <div class='col-lg-12'>
                <h3>We get the following</h3>
                
                
                <form name=".runtime_form">
                    <div class="col-lg-6">
                        Alice's Basis <input id=".sideA.basis" type="text" class='form-control' />
                    </div>
                    <div class="col-lg-6">
                        Alice's Value <input id=".sideA.value" type="text" class='form-control' />
                    </div>    
                    
                    <div class='col-lg-12 generatedPhotons'>
                        <h3>Generated photons:</h3>
                        
                        <span id='photons'></span>
                    </div>
                    
                    <div class='col-lg-6'>
                        <h3>Bob measures in his basis</h3>
                        <input id=".sideB.basis" type="text" class='form-control' />
                    </div>
                    <div class='col-lg-6'>
                        <h3>And gets the result</h3>
                        <input id=".sideB.value" type="text" class='form-control' />
                    </div>                         
                </form>
            </div>
            

        </div>
        
        <div class='row result2'>
            <div class="col-lg-12">
                <h3>Generated Keys</h3>
                <form name=".key_form">
                    <div class='col-lg-6'>
                        KeyA: <input id=".sideA.key" type="text" class='form-control' />
                    </div>
                    <div class="col-lg-6">
                         KeyB: <input id=".sideB.key" type="text" class='form-control' />
                    </div>
                </form>
            </div>
            
            <div class="col-lg-6 col-lg-offset-3 centered">
                <br />
                <br />
                <h3>Qubit efficiency: <span class='qubitEff'></span></h3>
                <span class='overlap'></span>
            </div>
            
            <div class="col-lg-6 col-lg-offset-3 centered">
                <h3>Want to continue with this key?</h3>
                <input id="step2" type="button" value="Yes, please" class='btn' onclick=step2() />
            </div>
        </div>
        
        <div class='row result3'>
            <div class="col-lg-12">
                <h3>Encrypting the message and sending it</h3>
                Please, enter your message: <input id=".text" name=".text" type="text" class='form-control' />
                <br />
                <!-- Message Bits <input id=".bits" name=".bits" type="text" class='form-control' /> -->
                
                <input id="encBtn" type="button" value="Challenge me, you Eve!" class='btn' onclick=encryptMessage() />          
            </div>
            <div class="col-lg-12 result4">
                <br />
                <h3>Encrypted message:</h3>
                <textarea id="encMessage" class="form-control" rows="4"></textarea>
            </div>
        </div>
    </div>
    <div class="picture-side right">
        <div class='elements right'>
            <ul id='right-panel'>
                <li><img src='assets/img/detector.png' id='detector1' class='detector' title="Photon Detector" draggable="true" /></li>
                <li><img src='assets/img/detector.png' id='detector2' class='detector' title="Photon Detector" draggable="true" /></li>
                <li><img src='assets/img/detector.png' id='detector3' class='detector' title="Photon Detector" draggable="true" /></li>
                <li><img src='assets/img/eve.png' id='eveRepeater' class='eve' title="Eve" draggable="true" /></li>
                <li><img src='assets/img/coupler.png' id='coupler2' class='coupler' title="Optical Coupler" draggable="true" /></li>
            </ul>
        </div>
        
    </div>

<!-- modal box -->
<div class="modal fade" id="goodModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Layout Analysis Results</h4>
      </div>
      <div class="modal-body">
        <p>Everything's fine! You can launch the QKD algorithm!</p>
        How many qubits do you want to send? <input id="qub_num1" name="qub_num1" type="text" class='form-control' />       
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick=send() >Launch</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- modal box -->
<div class="modal fade" id="badModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Layout Analysis Results</h4>
      </div>
      <div class="modal-body">
        <p>Sorry! There is some error in your layout. Please, correct and try again. &hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- additional javascript libraries -->
<script type="application/javascript" src="assets/js/jquery.js"></script>

<!-- scripts -->
<script type="application/javascript" src="assets/js/addEvent.js"></script>
<script type="application/javascript" src="assets/js/tools.js"></script>
<script type="application/javascript" src="assets/js/main.js"></script>
<script type="application/javascript" src="assets/js/bootstrap.js"></script>

<script type="application/javascript" src="assets/js/element.js"></script>
<script type="application/javascript" src="assets/js/scheme.js"></script>

<script type="application/javascript" src="assets/js/bb84/main.js"></script>
<script type="application/javascript" src="assets/js/bb84/tools.js"></script>
<script type="application/javascript" src="assets/js/bb84/bb84.js"></script>

</body>
</html>
